<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        ul{
           padding-inline-start: 0;
        }
        li{
           display: flex; 
           justify-content: space-around;
           border: 1px solid #ccc;
        }
        li a{
            text-decoration: none;
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
   <form action="#">
       <input type="text" placeholder="请输入内容" v-model="content">
       <input type="submit" value="添加" @click="add">
   </form>
   <ul>
       <li v-for="item in list" :key="item.id">
           <input type="checkbox">
           <span>{{item.content}}</span>
           <a href="#" @click.prevent="del(item.id)">&times;</a>
       </li>
   </ul>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data: {
                content: "",
                maxId:2,
                
               list:[{
                   id:1,
                   content:"吃饭"
               },{
                id:2,
                   content:"睡觉"
               }]
            },
            methods:{
                add(){
                    this.maxId++;
               this.list.push({id: this.maxId, content: this.content });
                },
                del(id){
                   // console.log(id)
                    //filter
                 //const item = this.list.filter(p=>p.id===id)
                 //console.log(item)
                 //方式1
                 const index = this.list.findIndex(p=> p.id===id)
                    this.list.splice(index, 1)
                   //方式2
                   //this.list = this.list.filter(p=>p.id!==id)
                }
            }
        })
    </script>
</body>
</html>